<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>discount</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>
<style>
	.demo {
		width:410px;
		margin:0 auto;
	}
	.stamp * {
		padding: 0;
		margin: 0;
		list-style:none;
		font-family:"Microsoft YaHei", 'Source Code Pro', Menlo, Consolas, Monaco, monospace;
	}
	.stamp {
		width: 387px;
		height: 140px;
		padding: 0 10px;
		margin-bottom: 50px;
		position: relative;
		overflow: hidden;
	}
	.stamp:before {
		content: '';
		position: absolute;
		top:0;
		bottom:0;
		left:10px;
		right:10px;
		z-index: -1;
	}
	.stamp i {
		position: absolute;
		left: 20%;
		top: 45px;
		height: 190px;
		width: 390px;
		background-color: rgba(255, 255, 255, .15);
		transform: rotate(-30deg);
	}
	.stamp .par {
		float: left;
		padding: 16px 15px;
		width: 220px;
		border-right:2px dashed rgba(255, 255, 255, .3);
		text-align: left;
	}
	.stamp .par p {
		color:#fff;
		font-size: 16px;
		line-height: 21px;
	}
	.stamp .par span {
		font-size: 50px;
		color:#fff;
		margin-right: 5px;
		line-height: 65px;
	}
	.stamp .par .sign {
		font-size: 34px;
	}
	.stamp .par sub {
		position: relative;
		top:-5px;
		color:rgba(255, 255, 255, .8);
	}
	.stamp .copy {
		display: inline-block;
		padding:21px 14px;
		width:100px;
		vertical-align: text-bottom;
		font-size: 30px;
		color:rgb(255,255,255);
		text-align: center;
		line-height: initial;
	}
	.stamp .copy p {
		font-size: 16px;
		margin-top: 15px;
	}
	.stamp01 {
		background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 5px, #F39B00 5px);
		background-size: 15px 15px;
		background-position: 9px 3px;
	}
	.stamp01:before {
		background-color:#F39B00;
	}
	.stamp02 {
		background: radial-gradient(transparent 0, transparent 5px, #D24161 5px);
		background-size: 15px 15px;
		background-position: 9px 3px;
	}
	.stamp02:before {
		background-color:#D24161;
	}
	.stamp03 {
		background: radial-gradient(transparent 0, transparent 5px, #7EAB1E 5px);
		background-size: 15px 15px;
		background-position: 9px 3px;
	}
	.stamp03:before {
		background-color:#7EAB1E;
	}
	.stamp03 .copy {
		padding: 10px 6px 10px 12px;
		font-size: 24px;
	}
	.stamp03 .copy p {
		font-size: 14px;
		margin-top: 5px;
		margin-bottom: 8px;
	}
	.stamp03 .copy a {
		background-color:#fff;
		color:#333;
		font-size: 14px;
		text-decoration:none;
		padding:5px 10px;
		border-radius:3px;
		display: block;
	}
	.stamp04 {
		width: 390px;
		background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 4px, #50ADD3 4px);
		background-size: 12px 8px;
		background-position: -5px 10px;
	}
	.stamp04:before {
		background-color:#50ADD3;
		left: 5px;
		right: 5px;
	}
	.stamp04 .copy {
		padding: 10px 6px 10px 12px;
		font-size: 24px;
	}
	.stamp04 .copy p {
		font-size: 14px;
		margin-top: 5px;
		margin-bottom: 8px;
	}
	.stamp04 .copy a {
		background-color:#fff;
		color:#333;
		font-size: 14px;
		text-decoration:none;
		padding:5px 10px;
		border-radius:3px;
		display: block;
	}
</style>

<body>

<div class="stamp stamp02">
	<div class="par"><p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>
	<div class="copy">副券<p>2015-08-13<br>2016-08-13</p></div>
	<i></i>
</div>

</body>
</html>